<template>
  <div>
    <HETTable1
      ref="completeruleTable"
      :tableData="data.tableData"
      :tHead="data.tHead"
      :total="data.total"
      :headerOperation="data.headerOperation"
      @getTableData="initTable"
    >
      <template #ruleStatus>
        <el-table-column label="开启状态">
          <template #default="scope">
            {{ scope.row.ruleStatus ? "开启" : "关闭" }}
          </template>
        </el-table-column>
      </template>
      <template #operation>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button @click="del(scope.row)">删除</el-button>
            <el-button @click="view(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </template>
    </HETTable1>
    <el-dialog
      v-model="dialog.visible"
      :title="dialog.title"
      :center="true"
      width="750px"
      style="max-height: 850px"
      @open="openDialog"
    >
      <div>
        <el-form
          ref="formRef"
          :inline="true"
          :model="ruleForm"
          :rules="formRules"
          class="demo-form-inline"
        >
          <el-form-item label="规则名称" prop="ruleName">
            <el-input v-model="ruleForm.ruleName" style="width: 205px" />
          </el-form-item>
          <el-form-item label="检测模型" prop="ruleModel">
            <el-select v-model="ruleForm.ruleModel" style="width: 290px">
              <el-option
                v-for="item in modelList"
                :key="item.id"
                :label="item.modelName"
                :value="item.modelCode"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="机器名称" prop="guardName">
            <el-input v-model="ruleForm.guardName" style="width: 205px" />
          </el-form-item>
          <el-form-item label="是否开启">
            <el-switch
              v-model="ruleForm.ruleStatus"
              :active-value="true"
              :inactive-value="false"
            ></el-switch>
          </el-form-item>
        </el-form>

        <div style="display: flex; justify-content: space-between; margin-bottom: 15px">
          <div>
            <el-checkbox v-model="ruleForm.systemPath">操作系统目录</el-checkbox>
            <el-checkbox v-model="ruleForm.selfPath">自定义重要数据目录</el-checkbox>
          </div>
          <el-select
            v-model="choosedFilePath"
            multiple
            collapse-tags
            placeholder="浏览目录"
            @change="handleSelectPath"
            style="width: 240px"
          >
            <el-option
              v-for="item in pathList"
              :key="item.id"
              :label="item.filePath"
              :value="item.filePath"
            />
          </el-select>
        </div>
        <el-table :data="choosedFilePathList" border style="width: 100%" max-height="450">
          <el-table-column label="序号" type="index" width="100px" />
          <el-table-column prop="filePath" label="文件路径" />
        </el-table>
      </div>
      <template #footer v-if="dialog.title == '设置完整性规则'">
        <div class="dialog-footer">
          <el-button type="primary" @click="submitConfirm(formRef)"> 确定 </el-button>
          <el-button @click="dialog.visible = false">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed, markRaw } from "vue";
import {
  req_getCompleteRuleList,
  req_addCompleteRule,
  req_getCompleteRuleDetail,
  req_delCompleteRule,
  req_getCompleteModelList,
  req_getPathList,
} from "~/utils/axios/index.js";
import { Lock, Close, Check, DocumentCopy, Upload, Plus } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
const completeruleTable = ref();
const formRef = ref();
const dialog = reactive({
  visible: false,
  title: "设置完整性规则",
});
const ruleForm = reactive({
  ruleName: "",
  guardName: "",
  ruleModel: "",
  ruleStatus: false,
  systemPath: false,
  selfPath: false,
  itemList: [],
});
const formRules = ref({
  ruleName: [{ required: true, message: "请输入规则名称", trigger: "blur" }],
  guardName: [{ required: true, message: "请输入机器名称", trigger: "blur" }],
  ruleModel: [{ required: true, message: "请选择检测模型", trigger: "blur" }],
});
const data = reactive({
  tHead: [
    {
      label: "规则名称",
      prop: "ruleName",
      isCustom: false,
    },
    {
      label: "机器名称",
      prop: "guardName",
      isCustom: false,
    },
    {
      label: "开启状态",
      prop: "ruleStatus",
      isCustom: true,
      slotName: "ruleStatus",
    },
    {
      label: "操作",
      prop: "operation",
      isCustom: true,
      slotName: "operation",
    },
  ],
  tableData: [],
  total: null,
  headerOperation: [
    {
      name: "新增",
      icon: markRaw(Plus),
      handleClick: () => {
        dialog.title = "设置完整性规则";
        ruleForm.ruleName = "";
        ruleForm.guardName = "";
        ruleForm.ruleModel = "";
        ruleForm.ruleStatus = false;
        ruleForm.systemPath = false;
        ruleForm.selfPath = false;
        ruleForm.itemList = [];
        choosedFilePathList.value = [];
        choosedFilePath.value = [];

        dialog.visible = true;
      },
    },
  ],
});
const modelList = ref([]);
const pathList = ref([]);
const openDialog = async () => {
  formRef.value.clearValidate();
  const { data: model } = await req_getCompleteModelList();
  modelList.value = model;
  const { data: path } = await req_getPathList();
  pathList.value = path;
};
const handleSelectPath = () => {
  choosedFilePathList.value = pathList.value.filter((item) =>
    choosedFilePath.value.includes(item.filePath)
  );
};
const choosedFilePathList = ref([]);
const choosedFilePath = ref([]);
const del = (row) => {
  ElMessageBox.confirm("确定要删除该条规则？", "删除完整性检查", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    center: true,
    closeOnClickModal: false,
  }).then(() => {
    req_delCompleteRule({ id: row.id }).then((res) => {
      res.data.succeed ? ElMessage.success("删除成功") : ElMessage.error("删除失败");
      completeruleTable.value.getTableData();
    });
  });
};
const view = (row) => {
  req_getCompleteRuleDetail({ id: row.id }).then((res) => {
    dialog.title = "规则详情";
    if (res.data) {
      Object.keys(ruleForm).forEach((key) => {
        ruleForm[key] = res.data[key];
      });
      choosedFilePath.value = res.data.itemList.map((item) => {
        return item.filePath;
      });
      choosedFilePathList.value = res.data.itemList.map((item) => {
        return {
          filePath: item.filePath,
        };
      });
    }
    dialog.visible = true;
  });
};

const submitConfirm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      ruleForm.itemList = choosedFilePathList.value;
      req_addCompleteRule(ruleForm).then((res) => {
        res.data.succeed ? ElMessage.success("设置成功") : ElMessage.error("设置失败");
        dialog.visible = false;
        completeruleTable.value.getTableData();
      });
    }
  });
};
const initTable = (params) => {
  completeruleTable.value.loading();
  req_getCompleteRuleList(params)
    .then((res) => {
      completeruleTable.value.finish();
      data.tableData = res.data.data;
      data.total = res.data.total;
    })
    .catch((err) => {
      completeruleTable.value.finish();
    });
};
</script>

<style lang="scss" scoped></style>
